<script setup lang="ts">
import { reactive,ref } from "vue"
import {ElForm,ElFormItem,ElInput,ElRadio,ElRadioGroup,ElMessage, ElButton} from "element-plus"
// import Nifi from "src/nifi";
import { IPackAntvX6 } from "@ui/pack-antv-x6";
import {t} from "../../i18n/index"

const {box,add,supportsSensitiveDynamicProperties} = defineProps<{box:IPackAntvX6.DialogEl,supportsSensitiveDynamicProperties:boolean,add:(name:string,sensitive:boolean) => Promise<any>}>()
const emits = defineEmits<{submit:[descriptor:any]}>()


const elformRef = ref();
const model = reactive({propertyName:"",sensitive:false})

// const addProperties = () => {
//     const url = `/nifi-api/processors/${id}/descriptors?propertyName=${model.propertyName}&sensitive=${model.sensitive}`
//     return nifi.api.get(url)
// }

box.submit(async () => {
    try {
        await elformRef?.value.validate();
    } catch (error) {
        ElMessage.error(t('form-validate-failed'))
        return false;
    }
    try {
        const res = await add(model.propertyName,model.sensitive);
        emits('submit',res.propertyDescriptor)
    } catch (error) {
        // ElMessage.error('新增属性失败 :: ' + error);
        ElMessage.error(t('propertiesitem-add-failed',{error}));
        console.error(error);
        return false;
    }
})

</script>

<template>
    <div class="w-500px relative box-border flex flex-col gap-16px">
        <div class="h-40px flex items-center justify-between">
            <b>{{t('propertiesitem-add-attr')}}</b>
            <div>
                <ElButton @click="box.handleCancel" type="info" plain >{{ t('box-cancel-text') }}</ElButton>
                <ElButton @click="box.handleSubmit" type="primary" >{{ t('box-submit-text') }}</ElButton>
            </div>
        </div>
        <ElForm ref="elformRef" :model="model" class="w-full h-full p-8px" label-width="120" label-position="left" > 
            <ElFormItem :label="t('propertiesitem-propertyName-label')" required prop="propertyName" trigger="blur" :rules="[{pattern:/^[^\d\s\t]/,message:t('propertiesitem-propertyName-rule')}]" >
                <el-input v-model="model.propertyName"></el-input>
            </ElFormItem>
            <ElFormItem :label="t('propertiesitem-sensitive-label')" prop="sensitive">
                <ElRadioGroup v-model="model.sensitive" :disabled="!supportsSensitiveDynamicProperties">
                    <ElRadio :value="true">{{t('propertiesitem-sensitive-true')}}</ElRadio>
                    <ElRadio :value="false">{{t('propertiesitem-sensitive-false')}}</ElRadio>
                </ElRadioGroup>
            </ElFormItem>
        </ElForm>
    </div>
</template>